<template>
	<view class="content">
			<view class="">
				<u-loading-page :loading="loading" loading-text="加载中"></u-loading-page>
			</view>
			<view class="userInfo">
				<view class="userInfo-left">
					<view class="">
						<image class="userImg" v-if="userInfo.headImg==null" src="../../static/images/avatar.png" mode="aspectFill">
						</image>
						<image class="userImg" v-else :src="userInfo.headImg" mode="aspectFill"></image>
					</view>
					<view class="rightBox">
						<view>
							<view class="userName" v-if="userInfo==null">昵称</view>
							<view class="userName" v-else>{{userInfo.userName}}</view>
						</view>
						<view class="userMoney">余额: <text style="margin-left:10rpx;">{{balance}}元</text></view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class="userInfo-right">
						<text @click="Topath('/packageA/user/membercz')">充值优惠</text>
					</view>
					<!-- <view class="userInfo-right" @click="Topath('/pages/subPack/rechargerecord')">
						消费记录
					</view> -->
				</view>
			</view>
			<view class="storeInfo" v-if="loading==false">
				<view class="store">
					<view class="store-left" @click="Topath('/pages/subPack/store?id='+nowBusinessInfo.businessId)">
						<view class="storeName">{{nowBusinessInfo.businessName}}</view>
						<view class="storeAddress">{{nowBusinessInfo.businessAddress.address}}</view>
					</view>
				</view>
				<view class="orderMoney">
					<view class="text">买单金额</view>
					<view class="other">
						<view class="title">￥</view>
						<input type="digit" v-model="payMoney" :focus="firstFocus" 
							placeholder="请询问店员后输入" />
						<view class="info">元</view>
					</view>
					<view class="">
						<view style="border-radius: 40rpx;" :style="{'background':templateConfig.page.themeColor}" class="button" @click="getPay()">
							确认付款
						</view>
						<!-- <view v-else class="button" @click="getPay()">确认付款</view> -->
					</view>
				</view>
			</view>
			<view class="button"@click="Topath('/packageA/user/membercz')" >进入充值页面
			</view>
			
			<view class="Recharge2" style="width: 90%;margin: auto;">
				<image style="width: 100%;" @click="Topath('/packageA/user/membercz')" :src="recommendedList[0].activityImgUrl" mode="widthFix"></image>
			</view>
			<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
				<view class="popup">
					<text style="font-size: 30rpx;font-weight: bold;margin: 40rpx 0;">请确认买单金额</text>
					<view class=""
						style="color: #999;display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;font-size: 30rpx;">
						<view>本次买单{{payMoney}}元</view>
						<view>还需微信支付{{needPay}}元</view>
					</view>
					<view class="btn">
						<text class="btn-lf btncommon" @click="show=false">取消支付</text>
						<text class="btn-rt btncommon" @click="Paymoney()">确认支付</text>
					</view>
				</view>
			</u-popup>
		</view>
</template>

<script>
	import {
		userIsLogin,
		searchUserInfoById,
		getCode,
		login,
		getBusinessInfoById,
		partnerAppletsWechatOrderPay,offlinePurchaseOrder,discountPurchaseOrder,getRecommen
	} from '../../../static/utils/api.js';
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				userInfo: uni.getStorageSync('userInfo'),
				openId: uni.getStorageSync('openId'),
				businessId:'',
				userInfo: {},
				balance: 0,
				payMoney: '',
				needPay: 0,
				nowBusinessInfo: {},
				show: false,
				payType: 0,
				loading: true,
				firstFocus: true,
				recommendedList:[]
			}
		},
		onLoad(option) {
			let that = this;
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
			this.businessId = uni.getStorageSync('nowBusinessInfo').businessId;
			that.getuserInfo();
			
		},
		onShow() {
			this.getswiperList();
		},
		methods: {
			getRgb(rgb){
				// 输入颜色的十六进制表示法 
				const hexColor = rgb; 
				// 从十六进制中提取红、绿、蓝通道值 
				const red = parseInt(hexColor.slice(1, 3), 16); 
				const green = parseInt(hexColor.slice(3, 5), 16); 
				const blue = parseInt(hexColor.slice(5, 7), 16); 
				// 设置透明度值（0到1之间） 
				const opacity = 0.7; 
				// 将转换后的值组合成 RGBA 值 
				const rgbaValue = `rgba(${red}, ${green}, ${blue}, ${opacity})`; 
				return rgbaValue
				console.log(rgbaValue); 
				// 输出结果：rgba(0, 255, 0, 1)
			},
			
			// 获取轮播
			getswiperList() {
				let data = {
					businessId: this.nowBusinessInfo.businessId.toString()
				};
				getRecommen(data).then(res => {
					if (res.code == 200) {
						let arr1 = [];
						
						arr1 = res.body.filter(itm => itm.type === 'recharge');
						
						this.recommendedList = [...arr1];
					}
				});
			},
			checktoken() {
				let that = this;
				let token = uni.getStorageSync('userInfo').accessToken;
				if (token) {
					userIsLogin().then(res => {
						if (res.body.isLogin) {
							that.getuserInfo();
							that.getStoreInfo();

						} else {
							uni.removeStorageSync('userInfo')
							that.login();
							
						}
					})
				} else {
					that.login()
				}
			},
			getuserInfo() {
				let data = {
					userId: uni.getStorageSync('userInfo').id
				}
				searchUserInfoById(data).then(res => {
					if (res.code == 200) {
						if (res.code == 200) {
							this.loading = false;
							this.userInfo = res.body;
							this.balance = res.body.balance;
			
						} else {
							uni.showToast({
								title: '用户失败' + JSON.stringify(res),
								icon: 'none'
							})
						}
					}
				})
			},
			
			getStoreInfo() {
				let data={
					businessId:this.businessId
				}
				getBusinessInfoById(data).then(res => {
					if (res.code == 200) {
						this.nowBusinessInfo = JSON.parse(res.body.jsonData);
						uni.setStorage({
							key: 'nowBusinessInfo',
							data: this.nowBusinessInfo
						});
					} else {
						uni.showToast({
							title: '店铺失败' + JSON.stringify(res),
							icon: 'none'
						})
					}
				})
			},
			
			login() {
				let that = this;
				let identification = '';
				uni.login({
					provider: 'weixin',
					success: function(wxs) {
						getCode({
							code: wxs.code
						}).then(res => {
							identification = res.body.openid;
							uni.setStorage({
								key: 'openId',
								data: identification
							});
							let user = {
								identification: identification,
							};
							let postData = `wechatServerJSON=${JSON.stringify(user)}`;
							login(postData).then(wes => {
								if (wes.code == 200) {
									uni.hideLoading();
									uni.setStorage({
										key: 'userInfo',
										data: wes.body
									});
									that.userInfo = wes.body;
									that.getuserInfo();
									that.getStoreInfo();

								} else {
									uni.hideLoading();
									uni.showModal({
										title: '授权失败',
										content: wes.msg,
										showCancel: false
									});
								}
							});

						});
					}
				});
			},

			// that.getuserInfo();
			// that.getStoreInfo();
			getUrlParam(url) {
				let params = url.split("?")[1].split("&");
				let obj = {};
				params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
				return obj
			},
			Topath(route) {
				uni.navigateTo({
					url: route
				})
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			
			
			getPay() {
				let that = this;
				that.firstFocus = false;
				if (that.payMoney !== '' && that.payMoney !== '0') {
					that.show = true;
					let Pay = 0
					if (that.balance > that.payMoney) {
						Pay = 0;
					} else {
						Pay = that.payMoney - that.balance;
					}
					that.needPay = Pay.toFixed(2);
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入支付金额'
					})
				}
			},
			Paymoney() {
				if (this.needPay == 0) {
					if (this.payType == 0) {
						this.Payorder()
					} else {
						this.offlinePay()
					}
				} else {
					this.getPaypalOrder()
				}
			},
			
			Payorder() {
				let that = this;
				let postData = {
					"client": "小程序",
					"openId": this.openId,
					"orderId": 0,
					"orderNo": "",
					"payMoney": this.payMoney,
					"payType": 3,
					"payWay": 4,
					"businessId": this.businessId
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				discountPurchaseOrder(postData).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						that.show = false;
						uni.showToast({
							icon:'success',
							title:'支付成功'
						})
						setTimeout(function() {
							uni.navigateBack()
							// uni.switchTab({
							// 	url:'/pages/index/index'
							// })
							// uni.redirectTo({
							// 	url: `/packageA/user/discountPay/paySuccss?money=${that.payMoney}`
							// });
						}, 600);
					} else {
						uni.showModal({
							title: '支付失败',
							content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
							showCancel: false
						})
						return
					}
				})
			},
			
			offlinePay() {
				let that = this;
				let postData = {
					"client": "小程序",
					"openId": this.openId,
					"orderId": 0,
					"orderNo": "",
					"payMoney": this.payMoney,
					"payType": 4,
					"payWay": 4,
					"businessId": this.businessId
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				offlinePurchaseOrder(postData).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						that.show = false;
						setTimeout(function() {
							uni.navigateBack()
						}, 600);
					} else {
						uni.showModal({
							title: '支付失败',
							content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
							showCancel: false
						})
						return
					}
				})
			},
			getPaypalOrder() {
				let that = this;
				let postData = {
					"client": "小程序",
					"extParm": "",
					"openId": that.openId,
					"orderId": 0,
					"orderNo": 0,
					"payMoney": that.needPay,
					"payWay": 1,
					"payType": 4,
					"businessId": that.businessId
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				partnerAppletsWechatOrderPay(postData).then(res => {
					if (res.code === 200) {
						that.payList = res.body;
						let data = res.body;
						uni.hideLoading();
						that.time = Date.now();
						wx.requestPayment({
							'appId': that.payList.appid,
							'nonceStr': that.payList.noncestr,
							'package': that.payList.package,
							'signType': 'MD5',
							'timeStamp': that.payList.timestamp,
							'paySign': that.payList.sign,
							success: function(res) {
								this.show = false;
								uni.showToast({
									title: '微信支付成功'
								});
								setTimeout(function() {
									uni.navigateBack()
								}, 600);
							},
							fail: function(err) {
								uni.showModal({
									title: '支付失败',
									content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
									showCancel: false
								})
								return
							}
						});
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '支付失败',
							content: res.msg,
							showCancel: false
						})
					}
				})
			},

		}

	}
</script>

<style lang="scss">
	.popup {
		width: 600rpx;
		border-radius: 16rpx;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	
		.btn {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			border-top: 3rpx solid #f5f5f5;
	
			.btncommon {
				width: 50%;
				text-align: center;
				line-height: 87rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
	
			.btn-lf {
				border-right: 3rpx solid #f5f5f5;
				color: #000;
			}
	
			.btn-rt {
				color: #e74032;
			}
		}
	}
	
	page {
		background-color: #e7e7e7;
	}
	
	.userInfo {
		width: 90%;
		padding: 16rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.userInfo-left {
			display: flex;
			align-items: center;
	
			.userName {
				font-size: 26rpx;
				font-weight: bold;
			}
	
			.userMoney {
				font-size: 22rpx;
				color: #aaa;
			}
		}
	
		.userImg {
			width: 70rpx;
			height: 70rpx;
			border-radius: 100%;
			margin-right: 16rpx;
		}
	
		.userInfo-right {
			font-size: 22rpx;
			color: #e53e30;
			text-align: center;
			padding: 8rpx;
			border: 3rpx solid #e53e30;
			border-radius: 40rpx;
		}
	}
	
	.storeInfo {
		width: 90%;
		margin: auto;
		background-color: #fff;
	
		.store {
			width: 100%;
			padding: 16rpx;
			box-sizing: border-box;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.storeName {
				font-size: 26rpx;
				font-weight: bold;
			}
	
			.storeAddress {
				font-size: 22rpx;
				color: #aaa;
			}
	
			.storeImg {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
			}
		}
	}
	.button {
		height: 80rpx;
		margin: 50rpx auto;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
	
		
	}
	.orderMoney {
		width: 100%;
		padding: 16rpx;
		box-sizing: border-box;
	
		.text {
			font-size: 24rpx;
			color: #aaa;
			margin: 30rpx 0;
		}
	
		.other {
			width: 96%;
			display: flex;
			border: 2rpx solid #efefef;
			height: 80rpx;
			align-items: center;
			margin: 0 auto;
			border-radius: 10rpx;
	
			.title {
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				font-weight: bold;
				height: 100%;
				background-color: #efefef;
			}
	
			input {
				flex: 1;
				height: 100%;
				display: flex;
				padding-left: 20rpx;
				color: #1f1f1f;
			}
	
			.info {
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				background-color: #efefef;
			}
		}
	
		.button {
			width: 96%;
			background-color: #c5c9ca;
			color: #fff;
			font-weight: bold;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 60rpx auto;
		}
	}
	
	.Recharge {
		width: 90%;
		margin: 40rpx auto;
		text-align: center;
		color: #fdd000;
		font-size: 24rpx;
	}
</style>